<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台-登录</title>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <#include "common/header.ftl"/>
<body>
<div class="container-fixed-xs">
    <div style="margin-left: 20px; margin-right: 20px; padding-top: 100px; padding-bottom: 100px;">
        <div class="user-login-box user-login-header">
            <h2>登录</h2>
        </div>
        <form id="loginForm" method="post" action="/admin/backLogin">
            <div class="form-group">
                <label for="userName" class="required">用户名</label>
                <input type="text" class="form-control" id="userName" name="userName" value="" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="passWord" class="required">密码</label>
                <input type="password" class="form-control" id="passWord" name="passWord" value="" placeholder="密码">
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-7">
                        <label for="checkCode" class="required">图形验证码</label>
                        <input type="text" class="form-control" id="checkCode" name="checkCode" placeholder="图形验证码" maxLength="4">
                    </div>
                    <div class="col-xs-5">
                        <img src="/captcha/code" style="padding-top: 25px;" onclick="this.src='/captcha/code?d='+new Date()" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-large btn-block btn-primary">登录</button>
                <button type="button" class="btn btn-large btn-block btn-primary" id="resetBtn">重置</button>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userName: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 5,
                            max: 18,
                            message: '用户名长度必须在5到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                passWord: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                checkCode: {
                    message: '图形验证码失败',
                    validators: {
                        notEmpty: {
                            message: '图形验证码不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv',function (e) {
            // Prevent form submission
           e.preventDefault();
           // Get the form instance
           var $form = $(e.target);
           // Get the BootstrapValidator instance
           var bv = $form.data('bootstrapValidator');
           // Use Ajax to submit form data
           $.post($form.attr('action'), $form.serialize(), function(result) {
                 if (result.errorCode == 'y') {
                     window.location.href = '/admin/main';
                 } else {
                     new $.zui.Messager('提示消息：' + result.errorText, {
                         icon: 'exclamation-sign',
                         type: 'danger',
                         time: 2000
                     }).show();
                 }
           }, 'json');
        });
        $('#resetBtn').click(function() {
            $('#loginForm').data('bootstrapValidator').resetForm(true);
        });
    });
</script>
<style>
    body {
        background-color: #F0F0F0;
        background-attachment:fixed;
        background-size:100%;
        height:auto;
    }
    .user-login-header {
        text-align: center;
    }
    .user-login-box {
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
</style>
</body>
</html>